<template>
  <div class="header">
    <div class="left">
      <img class="logo" src="@/assets/images/logo.png" alt="" />
      <img class="word" src="@/assets/images/NIDEC_CORPORATION.png" alt="" />
    </div>
    <div class="right">
      <!-- 年月日 -->
      <span class="text1">{{ year }}-{{ month }}-{{ day }}</span>
      <!-- 时分秒 -->
      <span class="text2">{{ hours }}:{{ minutes }}:{{ seconds }}</span>
      <span class="text3">🌤 27℃</span>
      <span class="text4">良好</span>
    </div>
  </div>
</template>

<script  setup lang="ts">
import { ref, onMounted, onBeforeUnmount } from "vue";

// 定义日期和时间的响应式变量
const year = ref<string>("");
const month = ref<string>("");
const day = ref<string>("");
const hours = ref<string>("");
const minutes = ref<string>("");
const seconds = ref<string>("");

// 获取当前时间
const getCurrentTime = () => {
  const date = new Date();

  // 获取年月日
  year.value = date.getFullYear().toString();
  month.value = (date.getMonth() + 1).toString().padStart(2, "0");
  day.value = date.getDate().toString().padStart(2, "0");

  // 获取时分秒
  hours.value = date.getHours().toString().padStart(2, "0");
  minutes.value = date.getMinutes().toString().padStart(2, "0");
  seconds.value = date.getSeconds().toString().padStart(2, "0");
};

// 在组件挂载后执行
onMounted(() => {
  getCurrentTime();

  // 每秒更新一次时间
  const timeInterval = setInterval(() => {
    getCurrentTime();
  }, 1000);

  // 在组件销毁时清除定时器
  onBeforeUnmount(() => {
    clearInterval(timeInterval);
  });
});
</script>

<style lang="scss" scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  .left {
    display: flex;
    align-items: center;
  }
  .right {
    > span {
      font-size: 18px;
      font-weight: 400;
      margin-left: 12px;
    }
    .text2 {
      font-size: 24px;
      margin-left: 8px;
    }
  }
  .logo {
    width: 270px;
    height: 105px;
    margin-left: 52px;
  }
  .word {
    margin-left: 51px;
  }
}
</style>